import {
    inject,
    observer,
} from 'mobx-react';
import {
    WeaDialog,
    WeaNewScroll,
    WeaLocaleProvider,
} from 'ecCom';

import {
    Row,
    Col,
    Icon,
    Spin,
    Modal,
    Table,
    Button,
} from 'antd';
import isEmpty from 'lodash/isEmpty';
import React from 'react';
import {
    WeaTableNew,
} from 'comsMobx';
import {
    toJS,
} from 'mobx';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('smsBatchImportStore')
@observer
class ImportResult extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {
            smsBatchImportStore,
        } = this.props;
        smsBatchImportStore.errorInfo = '';
    }

    reRenderColumns(c) {
        c.forEach((item) => {
            if (item.dataIndex == 'operatedetail') {
                item.render = function (text, record) {
                    return <span style={{ color: '#FF0000' }}>{text}</span>;
                };
            }
        });
    }

    cancel() {
        const {
            smsBatchImportStore,
        } = this.props;
        smsBatchImportStore.visibleResult = false;
    }

    getNewColumns = (columns) => {
        let newColumns = '';
        newColumns = columns.map((column) => {
          let newColumn = column;
          newColumn.render = (text, record, index) => // 前端元素转义
             (
                <div dangerouslySetInnerHTML={{ __html: text }} />
            );

          return newColumn;
        });
        return newColumns;
      }


    render() {
        const {
            smsBatchImportStore,
        } = this.props;
        const {
            visibleResult,
            importResultColumns,
            importResultDatas,
            importResultTip,
        } = smsBatchImportStore;
        return (
            <div>
            {
                visibleResult &&
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jsj9ns`}
                  title={getLabel(520406, '发送结果')}
                  icon="icon-coms-message"
                  iconBgcolor="#0079de"
                  visible={visibleResult}
                  closable={true}
                  onCancel={() => this.cancel()}
                  // #976927  概述：解决短信txt定时发送，发送失败页面样式错位的问题
                  style={{ width: 640, height: 450 }}
                >
                <div className="sms-import-dialog">
                    <div className="sms-import-result-icon" style={{ paddingTop: 15 }}>
                        <div style={{ width: 30, height: 30, borderRadius: 25, padding: 8, display: 'inline-block', backgroundColor: '#FF0000', lineHeight: '12px', fontSize: '12px' }}>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@sl940q`} type={'cross'} style={{ color: '#fff', lineHeight: '12px', fontSize: '12px' }} />
                        </div>
                    <span style={{ paddingLeft: 5 }}>{getLabel(520407, '发送失败，导入文件存在以下错误，请解决后重新上传！')}</span>
                    </div>
                        <div className="wea-new-table">
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@hz1ify`} height={340}>
                                <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@ilwb1n`} dataSource={toJS(importResultDatas)} columns={this.getNewColumns(toJS(importResultColumns))} pagination={false} />
                            </WeaNewScroll>
                        </div>
                    </div>
            </WeaDialog>
            }
            </div>
        );
    }
}

export default ImportResult;
